<template>
  <view class="invoice-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <!-- <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view> -->
    <CustomNavbar title="电子发票" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- Tab 切换 -->
      <view class="tab-container">
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 0 }"
          @click="switchTab(0)"
        >
          <text class="tab-text">未开发票</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 1 }"
          @click="switchTab(1)"
        >
          <text class="tab-text">已开发票</text>
        </view>
      </view>
      
      <!-- 未开发票列表 -->
      <view class="invoice-list" v-if="currentTab === 0">
        <view 
          class="invoice-card" 
          v-for="(item, index) in unissuedList" 
          :key="index"
        >
          <view class="card-left">
            <view class="amount-section">
              <text class="currency">¥</text>
              <text class="amount">{{ item.amount }}</text>
            </view>
            <text class="amount-label">开票金额</text>
          </view>
          <view class="card-right">
            <view class="info-content">
              <view class="info-row">
                <text class="info-label">月度消费金额:</text>
                <text class="info-value">¥{{ item.monthlyAmount }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">账单月份:</text>
                <text class="info-value">{{ item.billMonth }}</text>
              </view>
            </view>
            <button class="action-btn" @click="handleIssueInvoice(item)">开发票</button>
          </view>
        </view>
      </view>
      
      <!-- 已开发票列表 -->
      <view class="invoice-list" v-if="currentTab === 1">
        <view 
          class="invoice-card" 
          v-for="(item, index) in issuedList" 
          :key="index"
        >
          <view class="card-left">
            <view class="amount-section">
              <text class="currency">¥</text>
              <text class="amount">{{ item.amount }}</text>
            </view>
            <text class="amount-label">开票金额</text>
          </view>
          <view class="card-right">
            <view class="info-content">
              <view class="info-row">
                <text class="info-label">月度消费金额:</text>
                <text class="info-value">¥{{ item.monthlyAmount }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">账单月份:</text>
                <text class="info-value">{{ item.billMonth }}</text>
              </view>
              <view class="info-row" v-if="item.issueTime">
                <text class="info-label">开具时间:</text>
                <text class="info-value">{{ item.issueTime }}</text>
              </view>
            </view>
            <button class="action-btn view-btn" @click="handleViewInvoice(item)">查看</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api.js';

const navBarHeight = ref(88)
const currentTab = ref(0) // 0: 未开发票, 1: 已开发票

// 未开发票列表
const unissuedList = ref([
  {
    amount: '168.00',
    monthlyAmount: '168.00',
    billMonth: '2025-10'
  },
  {
    amount: '168.00',
    monthlyAmount: '168.00',
    billMonth: '2025-10'
  },
  {
    amount: '303.83',
    monthlyAmount: '303.83',
    billMonth: '2025-10'
  },
  {
    amount: '136.00',
    monthlyAmount: '136.00',
    billMonth: '2025-10'
  }
])

// 已开发票列表
const issuedList = ref([
  {
    amount: '168.00',
    monthlyAmount: '168.00',
    billMonth: '2025-10',
    issueTime: '2025-10'
  }
])

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  getInvoiceList()
})

const getInvoiceList = async()=>{
  api.getInvoiceList({}).then(res => {
    const data = res.data
    console.log('查询电子发票:', JSON.stringify(data))
    // //未开发票列表
    // unissuedList.value = data.unissuedList || []
    // //已开发票列表
    // issuedList.value = data.issuedList || []
    unissuedList.value = []
    issuedList.value = []
    data.forEach(item => {
      
      if(item.status=='2'){
        //未开发票

        let params = {
          id: item.id,
          invoiceId: item.invoiceId,
          productId: item.productId,
          amount: (item.amount/100).toFixed(2),
          billMonth: item.billMonth?(item.billMonth.substring(0,4)+'年'+item.billMonth.substring(4,item.billMonth.length)+'月'):'',
          monthlyAmount: (item.amount/100).toFixed(2),
          invoiceType:item.type?(item.type == '1000' ?'月结类':(item.type == '1100' ?'实缴类':'')):'月结类'
        }
        unissuedList.value.push(params)

      }else if(item.status=='1'){
        //已开发票
        let params = {
          id: item.id,
          url: item.url,
          type: item.type,
          invoiceId: item.invoiceId,
          productId: item.productId,
          amount: (item.amount/100).toFixed(2),
          billMonth: item.billMonth?(item.billMonth.substring(0,4)+'年'+item.billMonth.substring(4,item.billMonth.length)+'月'):'',
          monthlyAmount: (item.amount/100).toFixed(2),
          invoiceType:item.type?(item.type == '1000' ?'月结类':(item.type == '1100' ?'实缴类':'')):'月结类'
        }
        issuedList.value.push(params)
        
      }
    })
  }).catch(err => {
    console.error('查询电子发票失败:', err)
  })
}

const writeInvoice = async(item)=>{
  api.writeInvoice({
    id: item.id,
    invoiceId: item.invoiceId,
    amount: item.amount,
    billMonth: item.billMonth,
    productId: item.productId,
    status: item.status,
    type: item.invoiceType
  }).then(res => {
    const data = res.data
    console.log('开发票:', JSON.stringify(data))
    // 开发票成功后，刷新发票列表
    getInvoiceList()
  }).catch(err => {
    console.error('开发票失败:', err)
  })
}

const switchTab = (index) => {
  currentTab.value = index
  // 这里可以添加切换 tab 后的数据加载逻辑
}

const handleIssueInvoice = (item) => {
  // 跳转到发票开具页面，传递发票信息

  uni.navigateTo({
    url: `/pages/invoice-issue/invoice-issue?amount=${item.amount}&billMonth=${item.billMonth}&queryParams=${encodeURIComponent(JSON.stringify(item))}`,
    success: () => {
      console.log('跳转到发票开具页面成功')
    },
    fail: (err) => {
      console.error('跳转失败:', err)
    }
  })
}

const handleViewInvoice = (item) => {
  console.log('ssss = ',JSON.stringify(item))
  // 查看发票详情
  // 跳转到发票预览页面
  uni.navigateTo({
    url: `/pages/invoice-preview/invoice-preview?imageUrl=${encodeURIComponent(item.url)}`,
    success: () => {
      console.log('跳转到发票预览页面成功')
    },
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '跳转失败',
        icon: 'none',
        duration: 2000
      })
    }
  })
}
</script>

<style scoped>
.invoice-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* Tab 切换 */
.tab-container {
  display: flex;
  /* background: rgba(255, 255, 255, 1); */
  border-radius: 16rpx;
  padding: 8rpx;
  margin-top: 40rpx;
  margin-bottom: 32rpx;
}

.tab-item {
  flex: 1;
  /* padding: 20rpx 0; */
  text-align: center;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.tab-text {
  color: rgba(255, 255, 255, 0.8);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
/* font-weight: 500; */
line-height: 100%;
}

.tab-item.active .tab-text {
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
}
/* .tab-item.active .tab-text ::after{
  content: '';
  position: absolute;
  border-radius: 180px;
background: linear-gradient(270.00deg, rgba(134, 199, 255, 1),rgba(31, 107, 255, 1) 100%);
} */

/* 发票列表 */
.invoice-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.invoice-card {
  background: rgba(246, 246, 246, 1);
  border-radius: 16rpx;
  display: flex;
  align-items: stretch;
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
  overflow: hidden;
  min-height: 160rpx;
}

/* 左侧蓝色区域 */
.card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 160rpx;
  /* padding: 32rpx 24rpx; */
  background: linear-gradient(270.00deg, rgba(78, 138, 254, 1), rgba(69, 107, 219, 1) 100%);
}

.amount-section {
  display: flex;
  align-items: baseline;
  margin-bottom: 12rpx;
}

.currency {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 700;
  line-height: 1;
  margin-right: 4rpx;
}

.amount {
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  line-height: 1;
}

.amount-label {
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 28rpx;
}

/* 右侧白色区域 */
.card-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  background: rgba(255, 255, 255, 1);
  gap: 24rpx;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-row {
  /* display: flex; */
  align-items: center;
  gap: 8rpx;
}

.info-label {
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 32rpx;
}

.info-value {
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 32rpx;
}

/* 按钮区域 */
.action-btn {
  padding: 16rpx 32rpx;
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 40rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 24rpx;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-btn::after {
  border: none;
}

.view-btn {
  background: rgba(78, 138, 254, 1);
}
</style>

